<template>
	<view id="resetPasswordPage">
		<view class="row">
			<text class="label">密码</text>
			<input placeholder="请设置密码" type="password" v-model="pwd" @blur="reBlur"/>
		</view>
		<view class="row">
			<text class="label">确认密码</text>
			<input placeholder="请再次输入密码" type="password" v-model="surePwd" @blur="sureBlur"/>
		</view>
		<view class="pwd-tip" v-if="showTip2">
			格式不正确，输入4-16位带字母、数字的组合密码
		</view>
		<view class="pwd-tip" v-if="showTip3">
			两次输入的密码不一致
		</view>
		<view class="foooter-next" @click="toLogin">
			完成
		</view>
		<view class="modal" v-show="modalVisable">
			<view class="dialog">
				<image class="suc-pic" src="../../static/img/success.png" mode="aspectFill"></image>
				<view class="dia-txt">
					设置成功
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pwd: '',
				surePwd: '',
				showTip2: false,
				showTip3: false,
				modalVisable: false,
				valid: false
			}
		},
		methods: {
			validFormat(val) {
				let reg = /^[A-Za-z0-9]{3,15}$/
				this.showTip2 = !reg.test(val)
				return reg.test(val)
			},
			reBlur() {
				if (!this.validFormat(this.pwd)) {
					return
				}
				
			},
			sureBlur() {
				if (this.pwd && this.surePwd) {
					this.showTip3 = this.pwd !== this.surePwd
				}
			},
			toLogin() {
				
				
				this.valid = this.validFormat(this.pwd)
				if (!this.validFormat(this.pwd)) {
					return
				}
				this.valid = this.pwd === this.surePwd
				if (this.pwd !== this.surePwd) {
					return
				}
				
				if (this.valid) {
					this.modalVisable = true
					setTimeout(() => {
						uni.reLaunch({
						    url: '../login/login'
						})
					}, 1000)
				}
				
				
			}
		}
	}
</script>

<style>
#resetPasswordPage {
	padding-left: 34upx;
}
.row {
	height: 105upx;
	border-bottom: 1upx solid #eee;
	display: flex;
	align-items: center;
	font-size:28upx;
	font-weight:500;
	color: #666666;
}
.label {
	margin-right: 18upx;
	width: 200upx;
}
.pwd-tip {
	margin: 7upx 0 0 140upx;
	height:23upx;
	font-size:24upx;
	font-family:'PingFang SC';
	font-weight:500;
	color:rgba(234,10,42,1);
}
.suc-pic {
	width: 336upx;
	height: 229upx;
}
.modal {
	display: flex;
	justify-content: center;
	align-items: center;
}
.dialog {
	text-align: center;
}
.dia-txt {
	font-size:40upx;
	font-weight:500;
	color:rgba(234,10,42,1);
	margin: 13upx auto 0;
}
</style>
